<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-row>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">New Request</span>
          </div>
        </template>
        <el-row style="margin-top: 10px">
          <el-col :span="6">
            <span>Seq ID:</span>
            <el-input v-model="searchInfo.name" style="width: 95%" readonly />
          </el-col>
          <el-col :span="6">
            <span>Type:</span>
            <el-select
              v-model="searchInfo.compound"
              style="width: 95%"
              placeholder=""
              @change="
                getSequenceID(
                  searchInfo.projectCode,
                  searchInfo.compound
                )
              "
            >
              <el-option
                v-for="items in options1"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Project Code:</span>
            <el-select
              v-model="searchInfo.projectCode"
              style="width: 95%"
              placeholder=""
              @change="
                getSequenceID(
                  searchInfo.projectCode,
                  searchInfo.compound
                )
              "
            >
              <el-option
                v-for="items in options3"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Registration Date:</span>
            <el-date-picker
              v-model="searchInfo.date"
              style="width: 95%"
              type="datetime"
              placeholder="Select date and time"
              format="YYYY-MM-DD"
              value-format="YYYYMMDD"
            />
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <span>Description:</span>
            <el-input
              v-model="searchInfo.note"
              placeholder="Please input"
              type="textarea"
              style="width: 95%"
            />
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <span>CDS Structure:</span>
            <el-input
              v-model="searchInfo.peptide"
              placeholder="IL10/Hg0"
              type="textarea"
              style="width: 95%"
            />
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <span>CDS Sequence:</span>
            <el-input
              v-model="searchInfo.nucleotides"
              placeholder="ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCGAGGTTCAGCTGGTGCAGAGCGGAGCCGAAGTGAAAAAGAGCGGCGAGAGCCTGAAGATCAGCTGTAAAGGCAGCGGTTATAGCTTCACCAGCTACTGGATCGGCTGGGTGCGGCAGATGCCTGGAAAAGGCCTGGAATGGATGGGCATCTTCTACCCCGGCGACAGCTCTACCAGATACAGCCCTTCTTTTCAGGGCCAGGTGACCATTAGCGCTGATAAGTCTGTCAACACCGCCTATCTGCAGTGGTCCTCCCTGAAAGCCAGCGACACAGCCATGTACTACTGCGCCAGAAGGCGGAACTGGGGAAATGCCTTCGACATCTGGGGCCAAGGCACCATGGTGACAGTGTCCAGTGCTTCTACCAAAGGCCCCTCTGTGTTTCCACTGGCCCCTTCCAGCAAGTCCACATCTGGAGGCACCGCCGCCCTGGGATGTCTGGTCAAAGACTACTTCCCCGAGCCTGTGACCGTGTCCTGGAACAGCGGCGCCCTGACAAGCGGCGTGCACACCTTCCCTGCTGTGCTGCAAAGCAGCGGCCTGTATAGCCTGAGCAGCGTGGTGACAGTGCCTAGCAGCTCTCTCGGAACACAGACCTACATCTGCAACGTGAACCACAAGCCTTCTAATACCAAAGTGGATAAGCGGGTTGAGCCTAAGAGCTGCGACAAGACACACACATGTCCTCCGTGCCCCGCCCCTGAGCTACTGGGCGGCCCTAGCGTGTTCCTGTTCCCCCCCAAGCCTAAGGACACCCTGTACATCACCAGAGAGCCCGAAGTGACCTGTGTGGTGGTCGACGTGTCTCACGAAGATCCAGAGGTGAAGTTCAACTGGTACGTGGACGGCGTGGAAGTGCATAATGCCAAGACCAAGCCCAGAGAAGAGCAGTACAACAGCACATACAGAGTGGTGAGCGTGCTGACCGTGCTGCACCAGGACTGGCTGAACGGCAAGGAATACAAGTGCAAGGTGAGCAACAAGGCCCTGCCCGCTCCTATCGAGAAGACAATCAGCAAGGCCAAGGGACAACCTAGAGAGCCCCAGGTGTACACACTGCCTCCAAGCAGAGAGGAAATGACCAAAAACCAGGTTTCTCTGACCTGCCTGGTGAAGGGCTTCTACCCTTCCGATATCGCCGTCGAGTGGGAGAGCAACGGCCAGCCTGAAAACAACTACAAGACGACCCCTCCAGTGCTGGACAGCGATGGCTCTTTTTTCCTGTACAGCAAGCTGACAGTGGACAAGTCCAGATGGCAGCAGGGCAATGTGTTCAGCTGCAGCGTGATGCACGAGGCCCTGCACAACCACTACACCCAGAAGAGCCTGAGCCTGTCACCTGGCAAGTAATGA"
              type="textarea"
              style="width: 95%"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-right: 10px;position: relative;padding-top: 20px"
          >
            <el-button type="primary">SUBMIT</el-button>
            <el-button type="info" @click="goHistory">BACK</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { ref } from "vue";
// import HeaderDetail from "../../components/HeaderDetail.vue";
export default {
  name: "AddRequestRecord",
  components: {
    // HeaderDetail,
  },
  setup() {
    const value2 = ref("");
    const input = ref("");
    const shortcuts = [
      {
        text: "Last week",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "Last month",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "Last 3 months",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];
  },
  data() {
    return {
      readonly: true,
      searchInfo: {
        name: "",
        date: "",
        compound: "",
        source: "",
        projectCode: "",
        time: "",
        cell: "",
        note: "",
        peptide: "",
        nucleotides: "",
      },
      options1: [
        {
          value: "p",
          label: "plasmid",
        },
        {
          value: "r",
          label: "antibody",
        },
        {
          value: "v",
          label: "vector",
        },
        {
          value: "m",
          label: "mRNA",
        },
      ],
      options2: [
        {
          value: "CRO",
          label: "CRO",
        },
        {
          value: "2",
          label: "Internal",
        },
      ],
      options3: [
        {
          value: "CDI",
          label: "CDI",
        },
        {
          value: "PSA",
          label: "PSA",
        },
      ],
    };
  },
  methods: {
    getSequenceID(projectCode, compound) {
      let name = "";
      if (projectCode && compound) {
        name = "RV" + "_" + projectCode + "_" + compound + "001";
      }
      this.searchInfo.name = name;
    },
      goHistory () {
          window.history.go(-1);
      }
  },
};
</script>

<style scoped>
.search-card-title {
  font-size: 16px;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>
